// 问卷的基础js

export { ppa };
import { add_question, input_all, get_truly, add_height, edit_all_value } from "/static/js/edit/add-question.js";

let first_click = false;
let question = []; // 问题数组
let cnt = 0, h = 100;
let ppa; // 选项与问题之间的桥梁 

// 点击新建问卷
$('.new-questionnaire-content').click(() => {
    $('.new-questionnaire-content').hide();
    $('.editing-questionnaire').show();
});

// 问卷类型（三个选项的出现）
$('.d2').click(() => {
    first_click = true;
    $('.d1').height($('.d1').height());
    $('.d2').height($('.d2').height());
    if (!first_click) $('.addQuestions').height($('.addQuestions').height() + 5);
    else $('.addQuestions').height($('.addQuestions').height());
    $('.d3').height($('.d3').height());
    $('.all').height($('.d1').height() + $('.d2').height() + $('.d3').height() + $('.addQuestions').height() + $('.option').height());
    $('.addQuestions').fadeIn();
    // 设置只点击一次
    $('.d2').off('click'); // 解绑点击事件
});

// 单选
$('.single-choice').click(() => {
    question.push({ id: cnt + 1, type: "单选题" });
    add(" 单选题", "radio");
});

// 多选
$('.multiple-choice').click(() => {
    question.push({ id: cnt + 1, type: "多选题" });
    add(" 多选题", "checkbox");
});

//文本题
$('.text-title').click(() => {
    question.push({ id: cnt + 1, type: "文本题" });
    add(" 文本题", "true");
});

let s = "QQ"; // 设置独特的id "QQ + cnt" -> 方便取到对应对象
let add = (type, t) => {
    cnt++;
    adaptlargest();
    add_ques_del();
    add_ques_new();
    add_ques_up();
    add_ques_down();

    $('.new-questionnaire').height($('.new-questionnaire').height() + 60);
    if (t !== 'true') {
        // 加入div内容
        $('.option').append($('<div class="Q1 color"><div class="t1" id=' + s + cnt + '><p class="questions-title">Q'
            + question[cnt - 1].id + ' ' + question[cnt - 1].type + '</p><p style="text-indent: 50px; margin: 10px;"></p><div class="question"><div class="label-1"><label><input type='
            + t + ' name="q1" /> <span class="questions1">选项一</span> </label><br /></div><div class="label-2"><label><input type='
            + t + ' name="q1" /> <span class="questions2">选项二</span></label><br /></div><div class="label-3"><label><input type='
            + t + ' name="q1" /> <span class="questions3">选项三</span></label><br /></div></div></div><div class="t2 t2' + question[cnt - 1].id + '" >'
            + ''
            + '<div class="up color-deep questionup' + question[cnt - 1].id + '">上移</div>'
            + '<div class="down color-deep questiondown' + question[cnt - 1].id + '">下移</div>'
            + '<div class="copy color-deep questionnew' + question[cnt - 1].id + '">复用</div>'
            + '<div class="remove color-deep questiondel' + question[cnt - 1].id + '">删除</div></div></div>'));

        // 为新增加的div绑定点击事件
        let $div = $(`#QQ${cnt}`);
        $(document).on('click', `#QQ${cnt}`, (e) => {
            ppa = `#QQ${cnt}`;
            if (!$div.hasClass(`type_${t}`)) $div.addClass(`type_${t}`);

            let arr = get_truly();
            console.log(arr);
            if (arr[0] === undefined) add_question_edit_div(); // 出现编辑界面
            else {
                let j = ppa.substring(3);
                add_titles($('body'), j, 0, arr[0]); // 标题
                // 选项
                let $div = $(`.edit-content-add${j}`);
                for (let i = 1; i < arr.length; i++) {
                    add_options($div, i, arr[i]);
                }
            }
        });

        // 新增加问题选项编辑完成后点击 '完成编辑' 按钮的效果
        $(document).on('click', `.text-commit${cnt}`, () => {
            // 根据获取到到的选项信息对问题div进行改变
        });

    } else {
        $('.option').append($('<div class="Q1 color"><div class="t1" id=' + s + cnt + '><p>Q'
            + question[cnt - 1].id + ' ' + question[cnt - 1].type + '</p><p style="text-indent: 50px;margin: 10px;"></p><div><textarea class="option-text-s" name="option-text-s" id="option-text-s" cols="40" rows="5" style="resize:none" placeholder="请在这里输入文本内容"></textarea>'
            + '<div class="judges"><input type="checkbox" name="judge" id=""><label for="judge" > 此题是否必填</label></div>' + '</div>'));
    }
    if (cnt > 1) addHeight('.option', '.option', 150);
    else addHeight('.option', '.option', 50);

    $('.new-questionnaire').height($('.new-questionnaire').height() + 60)
};

// 进入编辑页面出现的div内容
// 根据问题的内容进行生成
let add_question_edit_div = () => {
    $('body').append(`
            <div class="edit-content edit-content${cnt}">
                <div style="height: 5px;"></div>
                <div class="text-title text-title${cnt}">
                    <input type="text" class="quesText quesText-title" name="" id="" placeholder="这里是标题">
                    <br>
                </div>
                <div class="edit-content-add">
                    <div class="edit1" id="iconfont1">
                        <input type="text" class="quesText quesText1" placeholder="选项1"></i><i
                            class="iconfont icon-shangyi icon-up iconfont-spe iconfontup1" id="iconfontup1"></i><i
                            class="iconfont icon-xiayi icon-down iconfont-spe iconfontdown1" id="iconfontdown1"></i><i
                            class="iconfont icon-zengjia icon-add iconfont-spe iconfontadd1" id="iconfontadd1"></i><i
                            class="iconfont icon-jianshao icon-del iconfont-spe iconfontdel1" id="iconfontdel1"></i>
                        <br>
                    </div>
                    <div class="edit2" id="iconfont2">
                        <input type="text" class="quesText quesText2" placeholder="选项2"><i
                            class="iconfont icon-shangyi icon-up iconfont-spe iconfontup2" id="iconfontup2"></i><i
                            class="iconfont icon-xiayi icon-down iconfont-spe iconfontdown2" id="iconfontdown2"></i><i
                            class="iconfont icon-zengjia icon-add iconfont-spe iconfontadd2" id="iconfontadd2"></i><i
                            class="iconfont icon-jianshao icon-del iconfont-spe iconfontdel2" id="iconfontdel2"></i>
                        <br>
                    </div>
                    <div class="edit3" id="iconfont3">
                        <input type="text" class="quesText quesText3" placeholder="选项3"></i><i
                            class="iconfont icon-shangyi icon-up iconfont-spe iconfontup3" id="iconfontup3"></i><i
                            class="iconfont icon-xiayi icon-down iconfont-spe iconfontdown3" id="iconfontdown3"></i><i
                            class="iconfont icon-zengjia icon-add iconfont-spe iconfontadd3" id="iconfontadd3"></i><i
                            class="iconfont icon-jianshao icon-del iconfont-spe iconfontdel3" id="iconfontdel3"></i>
                        <br>
                    </div>
                </div>
                <div class="text-commit text-commit${cnt}">
                    <div class="text-commit-in">完成编辑</div>
                </div>
            </div>`
    );

    // 编辑时设置界面不可动
    $('body, html').addClass('add-spec');
};

// 增加标题
let add_titles = ($div, cnt, idx, value) => {
    $div.append(`
        <div class="edit-content edit-content${cnt}">
            <div style="height: 5px;"></div>
            <div class="text-title text-title${idx}">
                <input type="text" class="quesText quesText-title quesText-title${idx}" name="" id="" placeholder="这里是标题">
                <br>
            </div>
            <div class="edit-content-add edit-content-add${cnt}">
            </div>
            <div class="text-commit text-commit${cnt}">
                <div class="text-commit-in">完成编辑</div>
            </div>
        </div>
    `);
    $div.find(`.quesText-title${idx}`).val(value);
};

// 增加选项
let add_options = ($div, idx, value) => {
    $div.append(`
        <div class="edit edit${idx}" id="iconfont3">
            <input type="text" class="quesText quesText${idx}" placeholder="选项3"></i><i
            class="iconfont icon-shangyi icon-up iconfont-spe iconfontup${idx}" id="iconfontup3"></i><i
            class="iconfont icon-xiayi icon-down iconfont-spe iconfontdown${idx}" id="iconfontdown3"></i><i
            class="iconfont icon-zengjia icon-add iconfont-spe iconfontadd${idx}" id="iconfontadd3"></i><i
            class="iconfont icon-jianshao icon-del iconfont-spe iconfontdel${idx}" id="iconfontdel3"></i>
            <br>
        </div>`
    );
    $div.find(`.quesText${idx}`).val(value);
};

// div适应内容的增加
let addHeight = (dest, name, height) => {
    $(dest).height($(name).height() + height);
    $('.all').height($('.d1').height() + $('.d2').height() + $('.d3').height() + $('.addQuestions').height() + $(dest).height());
    document.getElementById('edit').style.top = "100px";
};

// 最外面div的适应
let adaptlargest = () => {
    if (cnt <= 4) h += 20;
    else h += 30;
    $('.new-questionnaire').height(h + "vh");
};

// 必选按钮
let f = true;
$('.judges').click(() => {
    // 奇数次点击才是选中
    if (f) $('#option-text-s').setAttribute("required", "true");
    else $('#option-text-s').removeAttr("required");
    f = !f;
});

// 单、多选题的鼠标悬停效果
$('.option').hover(
    () => { // 悬停
        $('.t2').show();
    },
    () => { // 移走
        $('.t2').hide();
    }
);

// 上移
let add_ques_up = () => {
    $(document).on('click', `.questionup${cnt}`, (e) => {
        let $this = $(e.target).parents('.Q1');
        if ($this.prev().length === 0) return;
        let $self = $this.clone(true);
        $this.prev().before($self);
        $this.remove();
    })
};

// 下移
let add_ques_down = () => {
    $(document).on('click', `.questiondown${cnt}`, (e) => {
        let $this = $(e.target).parents('.Q1');
        if ($this.next().length === 0) return;
        let $self = $this.clone(true);
        $this.next().after($self);
        $this.remove();
    })
};

// 复用
let add_ques_new = () => {
    $(document).on('click', `.questionnew${cnt}`, (e) => {
        let $div = $(e.target).parents('.Q1');
        $div.after($div.clone(true));
        add_height($('.option'), $div.height() + 21);
        add_height($('.all'), $div.height() + 21);
        add_height($('.new-questionnaire'), $('.new-questionnaire').height() + 50);
        question.push(cnt);
    });
};

// 删除
let add_ques_del = () => {
    $(document).on('click', `.questiondel${cnt}`, (e) => {
        if (question.length === 1) return;
        let $div = $(e.target).parents('.Q1');
        console.log($div.height());
        add_height($(ppa), $div.height() * -1);
        add_height($('.option'), $div.height() * -1);
        add_height($('.all'), $div.height() * -1);
        $div.remove();
        question.pop();
    });
};